<template>
  <div class="container">
    <div class="left-board">
      <!--
      <div class="logo-wrapper">
        <div class="logo">
          <img :src="logo" alt="logo"> Form Generator62d
          <a class="github" href="https://github.com/JakHuang/form-generator" target="_blank">
            <img src="https://github.githubassets.com/pinned-octocat.svg" alt>
          </a>
        </div>
      </div>
      -->
      <el-scrollbar class="left-scrollbar">
        <div class="components-list">
          <div v-for="(item, listIndex) in leftComponents" :key="listIndex">
            <div class="components-title">
              <svg-icon icon-class="component" />
              {{ item.title }}
            </div>
            <draggable
              class="components-draggable"
              :list="item.list"
              :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
              :clone="cloneComponent"
              draggable=".components-item"
              :sort="false"
              @end="onEnd"
            >
              <div
                v-for="(element, index) in item.list"
                :key="index"
                class="components-item"
                :class="'zxb-'+element.__config__.csmtype"
                @click="addComponent(element)"
              >
                <div class="components-body">
                  <svg-icon :icon-class="element.__config__.tagIcon" />
                  {{ element.__config__.label }}
                </div>
              </div>
            </draggable>
          </div>
        </div>
      </el-scrollbar>

      <div class="importData" @click="importDataShowFun">AI数据分析</div>
    </div>

    <div class="center-board">
<!--
      <div class="action-bar">

        <el-button icon="el-icon-view" type="text" @click="showJson">
          查看json
        </el-button>

        <el-button icon="el-icon-video-play" type="text" @click="run">
          运行
        </el-button>

        <el-button icon="el-icon-download" type="text" @click="download">
          导出vue文件
        </el-button>
        <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
          复制代码
        </el-button>
        <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
          清空
        </el-button>

      </div>
-->
      <el-scrollbar class="center-scrollbar">
        <el-row class="center-board-row" :gutter="formConf.gutter">
          <el-form
            :size="formConf.size"
            :label-position="formConf.labelPosition"
            :disabled="formConf.disabled"
            :label-width="formConf.labelWidth + 'px'"
          >
            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
              <draggable-item
                v-for="(item, index) in drawingList"
                :key="item.renderKey"
                :drawing-list="drawingList"
                :current-item="item"
                :index="index"
                :active-id="activeId"
                :form-conf="formConf"
                @activeItem="activeFormItem"
                @copyItem="drawingItemCopy"
                @deleteItem="drawingItemDelete"
                :class="'zxb-'+item.__config__.csmtype"
              />
            </draggable>
            <div v-show="!drawingList.length" class="empty-info">
              从左侧拖入或点选组件进行表单设计
            </div>
          </el-form>
        </el-row>

      </el-scrollbar>
    </div>

    <right-panel
      :active-data="activeData"
      :form-conf="formConf"
      :show-field="!!drawingList.length"
      @tag-change="tagChange"
      @fetch-data="fetchData"
    />

    <form-drawer
      :visible.sync="drawerVisible"
      :form-data="formData"
      size="100%"
      :generate-conf="generateConf"
    />
    <json-drawer
      size="60%"
      :visible.sync="jsonDrawerVisible"
      :json-str="JSON.stringify(formData)"
      @refresh="refreshJson"
    />
    <code-type-dialog
      :visible.sync="dialogVisible"
      title="选择生成类型"
      :show-file-name="showFileName"
      @confirm="generate"
    />
    <input id="copyNode" type="hidden">



    <el-dialog title="AI数据分析" :visible.sync="importDataShow"  width="1000px" :before-close="handleClose" top="70px">
      <!-- 头部数据 -->
      <textarea name="" v-model="importReamrk" style="width: 100%; height: 200px; display: block; padding: 6px 16px; box-sizing: border-box;"></textarea>
      <Tinymce v-model="importDataContent" :height="importDataH" placeholder="在这里输入需要分析的数据" />
      <div v-html="xunfeiData"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importDataShow = false">取 消</el-button>
        <el-button type="primary" @click="importDataSubmit" :loading="subLoading">确 定</el-button>
      </span>
    </el-dialog>






  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { debounce } from 'throttle-debounce'
import { throttle } from 'throttle-debounce'
import { saveAs } from 'file-saver'
import ClipboardJS from 'clipboard'
import render from '@/components/render/render'
import FormDrawer from './FormDrawer'
import JsonDrawer from './JsonDrawer'
import RightPanel from './RightPanel'
import {
  csmwjHeaderFooterComponents,
  csmwjSelectComponents,
  csmwjInputComponents,
  csmCustomerComponents,
  inputComponents, selectComponents, layoutComponents, formConf
} from '@/components/generator/config'
import {
  exportDefault, beautifierConf, isNumberStr, titleCase, deepClone
} from '@/utils/index'
import {
  makeUpHtml, vueTemplate, vueScript, cssStyle
} from '@/components/generator/html'
import { makeUpJs } from '@/components/generator/js'
import { makeUpCss } from '@/components/generator/css'
import drawingDefalut from '@/components/generator/drawingDefalut'
import logo from '@/assets/logo.png'
import CodeTypeDialog from './CodeTypeDialog'
import DraggableItem from './DraggableItem'
import {
  getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf
} from '@/utils/db'
import loadBeautifier from '@/utils/loadBeautifier'
import Tinymce from '@/components/tinymce/index.vue'


let beautifier
const emptyActiveData = { style: {}, autosize: {} }
let oldActiveId
let tempActiveData
const drawingListInDB = getDrawingList()
const formConfInDB = getFormConf()
const idGlobal = getIdGlobal()

export default {
  components: {
    draggable,
    render,
    FormDrawer,
    JsonDrawer,
    RightPanel,
    CodeTypeDialog,
    DraggableItem,
    Tinymce
  },
  data() {
    return {
      xunfeiData:null, // 星火大模型数据
      importDataShow:false,
      importDataH:300, // 高度
      importDataContent:`一、个人基本情况
1.您的性别：A、男  B、女
2.您的年龄：A、20-25岁  B、26-30岁  C、31-40岁  C、41-50岁
D、50岁以上
3.您的文化程度：A、硕士及以上  B、大学本科  C、大专  
4.您的政治面貌：A、中共党员  B、共青团员  C、群众  D、民主党派
5.您的岗位或职务：A、中层领导人员  B、基层领导人员  C、普通员工  
D、技能操作人员
6.您的工作年限：A、3年以下  B、3-10年  C、10-20年  D、20年以上
二、凝聚力方面
7.您认为目前公司的凝聚力（  ）
A、非常高  B、较高  C、一般  D、较低
8.[可多选]您认为目前影响公司凝聚力的主要因素是（  ）
A、工资、福利及休假  B、员工活动  C、领导的管理风格  D、领导与员工、员工与员工之间的关系  E、企业文化及制度  F、其他
9.您希望在工作之余（  ）
A、多开展文娱活动 B、多组织对话沟通 C、多提供学习机会 D、无所谓
10.您对公司目前的综合福利感到（  ）
A、非常满意  B、满意  C、基本满意  D、不满意，您的建议：（  ）
11.您与上级能融洽相处吗？（  ）
A、能 B、通常情况下可以  C、凑合  D、不能
12.您与同事共事感到愉快吗？（  ）
A、非常愉快 B、一般  C、有时愉快，有时不愉快  D、经常不愉快
13.您认为不能与同事或上级融洽相处的原因是（  ）
A、没有共同的目标，各为私利，不像一个集体
B、领导或同事与我私下关系不好
C、没打算在公司长待，所以不打算经营关系
D、我与上级或同事性格不合
E、我与上级或同事相处融洽
F、其他（填写）
14.[可多选]您目前最关注公司的问题是（  ）
A、公司发展前景  B、个人发展空间  C、工作压力  D、收入福利
E、培训教育  F.其他
15.公司在解决员工急难愁盼问题是否采取有效措施？效果如何？
A、有，效果很好B、一般，效果较好  C、较差，形式主义只喊口号，没有切实的行动  D、没有
16.您对工会开展的活动是否满意？
A、非常满意，活动丰富多彩
B、基本满意，开展了一些活动，取得了一些效果
C、不太满意，活动开展形式不佳、效果差
D、不满意，没有开展过活动
17.以下哪种方式的工会活动是你愿意参加的（多选≤3项）
A、户外活动（包含但不限于健步走、拓展运动等）
B、文艺活动（包含但不限于文艺晚会、文化作品评选、朗诵比赛等）
C、体育竞技（乒乓球、羽毛球、篮球、排球填写你最想参加的项目）
D、手工制作
E、棋牌活动
F、趣味游戏
G、EAP活动
H、其他
18.您认为下步公司应该重点在哪些方面开展“我为群众办实事”工作
A、改善员工生活、工作条件等方面
B、员工成长成才（技能提升、管理提升等）方面
C、员工家庭关注、关爱方面
D、对困难员工帮扶救助方面
E、提高员工福利、待遇等方面
F、其他方面（填写）
三、工作方面
19. 您对目前的工作环境是否满意（  ）
A、非常满意  B、满意  C、基本满意  D、不满意，您的建议：（  ）
20.您目前的工作状态是（  ）
A、工作精神饱满，积极性高，处理事情得心应手
B、状态还行，能够完成领导交办的任务
C、感觉到工作累，压力大
D、对工作消极厌倦
21.您的工作压力如何（  ）
A、非常大  B、大  C、一般  D、没有压力
22.[可多选]您的工作压力主要来源于（  ）
A、公司领导  B、直接领导  C、工作量太大  D、公司的考核机制 
E、自身原因  F、其他原因
23.[可多选]您认为工作方面自身存在的主要问题是（  ）
A、能力不够用
B、心态不积极
C、与同事有矛盾
D、个人问题影响工作
24. 您认为目前公司的工作效率（  ）
A、非常高  B、较高  C、一般  D、较低
25.[可多选]您认为影响工作效率的主要原因是（  ）
A、管理流程不清，办事走弯路
B、工作职责不明，部门协调困难，延误工作时间
C、上级领导分配任务不均衡，多次更改
D、岗位工作内容比较无趣，导致员工积极性不高
26.您认为您的能力是否得到了充分发挥（  ）
A、已尽我所能
B、未能完全发挥
C、没感觉
D、没有施展的机会
27.最希望公司能给您提供什么机会（  ）
A、晋升  B、加薪  C、外派学习  D、其他（填写）
28.[可多选]您认为影响员工积极性的主要因素是（  ）
A、工资收入   B、劳保福利   C、个人发展   D、激励   E、工作氛围    F、上下级关系  G、异地工作
四、薪酬待遇方面
29.您对自己现在工作岗位满意度是（  ）
A、非常满意  B、满意  C、基本满意  D、不满意，原因是：（  ）
30.您认为薪酬所得与付出的努力相比是否对等（  ）
A、很对等  B、比较对等  C、一般  D、较不对等，原因是：（  ）
31.[可多选]如下哪些薪酬的具体表现形式更能够激发你的工作热情
A、良好宽松的工作环境  B、和谐的企业文化  C、较多的培训机会
E、工资收入增长
五、培训方面
32.您对公司目前的培训工作感到（  ）
A、非常满意  B、满意  C、基本满意  D、不满意，原因是：（  ）
33.[可多选]您对公司目前的培训工作哪些方面感到不满意（ ）
A、形式单一  B、内容没有吸引力  C、与本人需求不相称
D、组织不到位  E、讲师水平太差  F、理论与实际脱节
34.您更倾向于哪种培训方式（  ）
A、内部交流学习，各部门收集学习材料进行学习  
B、从外部聘请讲师进行培训
C、参加天分学习培训
D、其他
35. 您认为目前最需要的培训是（  ）
A、技能提升
B、复合工种
C、培训专业知识培训
D、管理能力培训
六、合理化建议
36.您认为目前公司急需解决的问题有哪些？

37.您对公司的长远发展有何意见和建议？

38.您目前工作、生活中遇到的主要问题是什么？存在什么困难？有何诉求？
`,
      subLoading:false,
      importReamrk:'',

      logo,
      idGlobal,
      formConf,
      csmwjHeaderFooterComponents,
      csmwjSelectComponents,
      csmwjInputComponents,
      csmCustomerComponents,
      inputComponents,
      selectComponents,
      layoutComponents,
      labelWidth: 100,
      drawingList: drawingDefalut,
      drawingData: {},
      activeId: drawingDefalut[0].formId,
      drawerVisible: false,
      formData: {},
      dialogVisible: false,
      jsonDrawerVisible: false,
      generateConf: null,
      showFileName: false,
      activeData: drawingDefalut[0],
      saveDrawingListDebounce: debounce(340, saveDrawingList),
      saveIdGlobalDebounce: debounce(340, saveIdGlobal),
      csmsaveDebounce: debounce(340, this.csmsave),
      leftComponents: [
        // {
        //   title: 'CSM自定义组件(问卷)',
        //   list: csmCustomerComponents
        // },
        {
          title: '问卷头部和尾部 (问卷)',
          list: csmwjHeaderFooterComponents
        },
        {
          title: '选择题 (问卷)',
          list: csmwjSelectComponents
        },
        {
          title: '填空题 (问卷)',
          list: csmwjInputComponents
        },
        // {
        //   title: '输入型组件',
        //   list: inputComponents
        // },
        // {
        //   title: '选择型组件',
        //   list: selectComponents
        // },
        // {
        //   title: '布局型组件',
        //   list: layoutComponents
        // }
      ]
    }
  },
  computed: {
  },
  watch: {
    // eslint-disable-next-line func-names
    'activeData.__config__.label': function (val, oldVal) {
      if (
        this.activeData.placeholder === undefined
        || !this.activeData.__config__.tag
        || oldActiveId !== this.activeId
      ) {
        return
      }
      this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
    },
    activeId: {
      handler(val) {
        oldActiveId = val
      },
      immediate: true
    },
    drawingList: {
      handler(val,old) {
        let that = this;
        console.log('drawingList', val);
        this.saveDrawingListDebounce(val)
        if (val.length === 0) this.idGlobal = 100
        this.csmsaveDebounce();
      },
      deep: true
    },
    idGlobal: {
      handler(val) {
        this.saveIdGlobalDebounce(val)
      },
      immediate: true
    }
  },
  mounted() {
    this.importReamrk = `我有一个文档，需要你严格参考我的规则来数据格式化文本数据，我的要求将文本

按照以下示例格式输出：“
[
  { "id": "101","type": "csmwj-header", "title":"问卷标题", "html": "感谢您能抽出几分钟时间来参加本次答题，现在我们就马上开始吧！" },
  { "id": 102, "type":"csmwj-footer", "title":"问卷底部", "html":"内容" },
  { "id": 103, "type":"csmwj-group-line", "title":"普通分组", "html":"" },
  { "id": 104, "type":"csmwj-scoring", "title":"记分组", "html":""  },
  { 
    "id": 105, "type":"csmwj-radio-group", "title":"单选题", "html":"",
    "options": [
      { "value":"选项一", "score": "5" }, 
      { "value":"选项二", "score": "4"  }, 
      { "value":"选项三", "score": "3" }
    ],
    "oneanswer": { "score": "", "answer": "" }//正确答案 score（分值）, answer（value值）
  },
  {
    "id": 106,
    "type":"csmwj-checkbox-group",
    "title":"多选题",
    "html":"",
    "options": [
      { "value":"选项一", "score": 1 }, 
      { "value":"选项二", "score": 2 },
      { "value":"选项三", "score": 3 },
    ],//选项：value（选项值）score（分值）
    "oneanswer": { "score": "", "answer": "" }//正确答案 score（分值）, answer（value值）
  },
  {
    "id": 107,
    "type":"csmwj-rightorwrong",
    "title":"判断题",
    "html":"",
    "options": [{ "value":"是" }, { "value":"否"}],//选项：value（选项值）
    "oneanswer": { "score": "", "answer": "" }//正确答案 score（分值）, answer（value值）
  },
  { 
    "id": 108, "type":"csmwj-score", "title":"选择记分", "html":"" ,
    "options": [
      { "value":"非常满意", "score": 5 }, 
      { "value":"较满意", "score": 4  }, 
      { "value":"一般", "score": 3 }, 
      { "value":"比较不满意", "score": 2 }, 
      { "value":"很不满意", "score": 1 },
    ],//选项：value（选项值）score（分值）
    "oneanswer": { "score": "", "answer": "" }//正确答案 score（分值）, answer（value值）
  },
  { "id": 109, "type":"csmwj-input", "title":"填空题", "html":"请问你的姓名？" },//普通的填空题，html（题目）
  { "id": 110, "type":"csmwj-input-score", "title":"填写打记分", "html":"你对他的印象分值，请输入 0-100" },//计分填空题，html（题目）
  { "id": 111, "type":"csmwj-input-fixed-score", "title":"默认记分", "html":"", "value":"10",}//固定送分题，value填写分值后，自动计分，html（题目），"value:"10"
]”；

其实的解释在注释里已经体现，下面是字段着重说明，以便于你理解：

Id：从 100 开始自增长；
Type：问题的类型 ；
type: 
'csmwj-header'='问卷标题', 
'csmwj-footer'='问卷底部',
'csmwj-group-line'='普通分组',
'csmwj-scoring'='记分组题',
'csmwj-radio-group'='单选题',
'csmwj-checkbox-group'='多选题',
'csmwj-rightorwrong'='判断题',
'csmwj-score'='选择记分',
'csmwj-input'='填空题',
'csmwj-input-score'='填写打记分',
'csmwj-input-fixed-score'='默认记分'；
Html：“问题的题目内容”；
value：选项、结果内容；
score：分值；
oneanswer：答案 包括 记分值 和答案内容
；"
`
    console.log('leftComponents---', this.leftComponents)
    // add by chensmn
    if(true){
      if (this.$route.query!=null && this.$route.query.id!=null) {
        let paperid = this.$route.query.id;

        let that = this;
        let method = 'get';
        //let url = 'http://127.0.0.1/fastadmin_plugin_1.2.0.20201008/public/KMAQCWvPYG.php/csmwj/csmwjadminapi/getpaperquestionjson?id='+paperid;
        let url = this._csmGenerateFullUrl('csmwj/csmwjadminapi/getpaperquestionjson?id='+paperid);
        this.$axios({
          method,
          url
        }).then(resp => {
          that.drawingList = resp.data.data.fields;
        });
      }
    }



    this.activeFormItem(this.drawingList[0])
    if (formConfInDB) {
      this.formConf = formConfInDB
    }
    loadBeautifier(btf => {
      beautifier = btf
    })
    const clipboard = new ClipboardJS('#copyNode', {
      text: trigger => {
        const codeStr = this.generateCode()
        this.$notify({
          title: '成功',
          message: '代码已复制到剪切板，可粘贴。',
          type: 'success'
        })
        return codeStr
      }
    })
    clipboard.on('error', e => {
      this.$message.error('代码复制失败')
    })
    
    const arry = [
  { "id": "101","type": "csmwj-header", "title":"问卷标题", "html": "感谢您能抽出几分钟时间来参加本次答题，现在我们就马上开始吧！" },
  { "id": 102, "type":"csmwj-footer", "title":"问卷底部", "html":"内容" },
  { "id": 103, "type":"csmwj-group-line", "title":"普通分组", "html":"" },
  { "id": 104, "type":"csmwj-scoring", "title":"记分组", "html":""  },
  { 
    "id": 105, "type":"csmwj-radio-group", "title":"单选题", "html":"",
    "options": [
      { "value":"选项一", "score": "5" }, 
      { "value":"选项二", "score": "4"  }, 
      { "value":"选项三", "score": "3" }
    ],
    "oneanswer": { "score": "", "answer": "" }//正确答案 score（分值）, answer（value值）
  },
  {
    "id": 106,
    "type":"csmwj-checkbox-group",
    "title":"多选题",
    "html":"",
    "options": [
      { "value":"选项一", "score": 1 }, 
      { "value":"选项二", "score": 2 },
      { "value":"选项三", "score": 3 },
    ],//选项：value（选项值）score（分值）
    "oneanswer": { "score": "", "answer": "" }//正确答案 score（分值）, answer（value值）
  },
  {
    "id": 107,
    "type":"csmwj-rightorwrong",
    "title":"判断题",
    "html":"",
    "options": [{ "value":"是" }, { "value":"否"}],//选项：value（选项值）
    "oneanswer": { "score": "", "answer": "" }//正确答案 score（分值）, answer（value值）
  },
  { 
    "id": 108, "type":"csmwj-score", "title":"选择记分", "html":"" ,
    "options": [
      { "value":"非常满意", "score": 5 }, 
      { "value":"较满意", "score": 4  }, 
      { "value":"一般", "score": 3 }, 
      { "value":"比较不满意", "score": 2 }, 
      { "value":"很不满意", "score": 1 },
    ],//选项：value（选项值）score（分值）
    "oneanswer": { "score": "", "answer": "" }//正确答案 score（分值）, answer（value值）
  },
  { "id": 109, "type":"csmwj-input", "title":"填空题", "html":"请问你的姓名？" },//普通的填空题，html（题目）
  { "id": 110, "type":"csmwj-input-score", "title":"填写打记分", "html":"你对他的印象分值，请输入 0-100" },//计分填空题，html（题目）
  { "id": 111, "type":"csmwj-input-fixed-score", "title":"默认记分", "html":"", "value":"10",}//固定送分题，value填写分值后，自动计分，html（题目），"value:"10"
]
    const str='```json [{"id": "101", "type": "csmwj-header", "title": "问卷标题", "html": "感谢您能抽出几分钟时间来参加本次答题，现在我们就马上开始吧！"}, {"id": "102", "type": "csmwj-footer", "title": "问卷底部", "html": "内容"}, {"id": "103", "type": "csmwj-group-line", "title": "普通分组", "html": ""}, {"id": "104", "type": "csmwj-scoring", "title": "记分组", "html": ""}, {"id": "105", "type": "csmwj-radio-group", "title": "单选题", "html": "", "options": [{"value": "选项一", "score": "5"}, {"value": "选项二", "score": "4"}, {"value": "选项三", "score": "3"}], "oneanswer": {"score": "", "answer": ""}}, {"id": "106", "type": "csmwj-checkbox-group", "title": "多选题", "html": "", "options": [{"value": "选项一", "score": 1}, {"value": "选项二", "score": 2}, {"value": "选项三", "score": 3}], "oneanswer": {"score": "", "answer": ""}}, {"id": "107", "type": "csmwj-rightorwrong", "title": "判断题", "html": "", "options": [{"value": "是"}, {"value": "否"}], "oneanswer": {"score": "", "answer": ""}}, {"id": "108", "type": "csmwj-score", "title": "选择记分", "html": "", "options": [{"value": "非常满意", "score": 5}, {"value": "较满意", "score": 4}, {"value": "一般", "score": 3}, {"value": "比较不满意", "score": 2}, {"value": "很不满意", "score": 1}], "oneanswer": {"score": "", "answer": ""}}, {"id": "109", "type": "csmwj-input", "title": "填空题", "html": "请问你的姓名？"}, {"id": "110", "type": "csmwj-input-score", "title": "填写打记分", "html": "你对他的印象分值，请输入 0-100"}, {"id": "111", "type": "csmwj-input-fixed-score", "title": "默认记分", "html": "", "value": "10"}] ```'
    const aaa = [{'id': '101', 'type': 'csmwj-header', 'title': '一、个人基本情况', 'html': ''},{'id': '102', 'type': 'csmwj-group-line', 'title': '1.您的性别', 'html': ''}]
    const astr = this.extractAndParseJsonContent(str)
    console.log('astr---222', astr)
    
    
  },
  methods: {
    extractJsonContent(str){
      let a = str.replace('```json','')
      let b = a.replace('```','')
      return b;
    },
    extractAndParseJsonContent(str) {
      // 正则表达式匹配 ```json 和 ``` 之间的内容
      const regex = /```json([\s\S]*?)```/;
      const match = regex.exec(str);
      
      if (match && match[1]) {
        // 提取的内容
        const jsonContent = match[1].trim();
        
        // 将单引号替换为双引号，使 JSON 合法
        const validJsonContent = jsonContent.replace(/'/g, '"');
        
        try {
          // 解析 JSON 字符串
          const parsedData = JSON.parse(validJsonContent);
          return parsedData;
        } catch (error) {
          console.error('JSON 解析错误:', error);
          return null;
        }
      } else {
        console.error('未找到 JSON 内容');
        return null;
      }
    },
    handleClose(){
      this.importDataShow = false;
    },
    importDataShowFun(){
      this.importDataShow = true;
      this.importDataH = window.innerHeight - 300;
    },


    // 提交大模型数据

    importDataSubmit(){
      this.subLoading = true
      const url = "https://spark-api-open.xf-yun.com/v1/chat/completions"
      const data = {
        "model": "4.0Ultra",
        "messages": [{
          "role": "user",
          "content": this.importReamrk + this.importDataContent
        }],
      }
      const headers = {
        "Content-Type": "application/json",
        "Authorization": "Bearer sFlgPFZglKGECmGReTZy:bccQOoQOroMioMxtXEWb", //  iaTzYwGCtTRlZeSEbGEE:XHQSeOORIPjgNLGWJuKJ
      }
      const method = "post"
      this.$axios({
        method,
        headers,
        data,
        url,
      }).then(res => {
        console.log('getXInghuo--1', res.data)
        console.log('getXInghuo--2', res.data.choices)
        this.subLoading = false
        if(res.data.code === 0 && res.data.choices.length > 0){
          this.xunfeiData = res.data.choices[0].message.content;
          console.log('this.xunfeiData---', this.xunfeiData)
          // 使用正则表达式移除开头和结尾的标记
          let jsonString = this.extractAndParseJsonContent(this.xunfeiData);
          console.log('jsonParsed-----------', jsonParsed); // 输出解析后的对象数组
        }

      }).catch(()=>{
        this.subLoading = false
      })
    },



    _arrayobjecttostring(arr){
      let ss = "";
      for(var index in arr){
        ss += JSON.stringify(arr[index]);
      }
      return ss;
    },
    setObjectValueByStringKeys(obj, strKeys, val) {
      const arr = strKeys.split('.')
      arr.reduce((pre, item, i) => {
        if (arr.length === i + 1) {
          pre[item] = val
        } else if (Object.prototype.toString.call(pre[item]) !== '[Object Object]') {
          pre[item] = {}
        }

        return pre[item]
      }, obj)
    },
    setRespData(component, respData) {
      const { dataPath, renderKey, dataConsumer } = component.__config__
      if (!dataPath || !dataConsumer) return
      const data = dataPath.split('.').reduce((pre, item) => pre[item], respData)
      this.setObjectValueByStringKeys(component, dataConsumer, data)
      const i = this.drawingList.findIndex(item => item.__config__.renderKey === renderKey)
      console.log("setRespData."+i);
      if (i > -1) this.$set(this.drawingList, i, component)

    },
    fetchData(component) {
      const { dataType, method, url } = component.__config__
      if (dataType === 'dynamic' && method && url) {
        this.setLoading(component, true)
        this.$axios({
          method,
          url
        }).then(resp => {
          this.setLoading(component, false)
          this.setRespData(component, resp.data)
        })
      }

    },
    setLoading(component, val) {
      const { directives } = component
      if (Array.isArray(directives)) {
        const t = directives.find(d => d.name === 'loading')
        if (t) t.value = val
      }

    },
    activeFormItem(currentItem) {
      this.activeData = currentItem  //v1.1.0 修复csminput控件添加后重复提交savepaperquestionjson请求的问题
      this.activeId = currentItem.__config__.formId

    },
    onEnd(obj) {
      if (obj.from !== obj.to) {
        this.fetchData(tempActiveData)
        this.activeData = tempActiveData
        this.activeId = this.idGlobal
      }

    },
    addComponent(item) {
      console.log("addComponent");
      const clone = this.cloneComponent(item)
      this.fetchData(clone)
      this.drawingList.push(clone)
      this.activeFormItem(clone)

    },
    cloneComponent(origin) {
      const clone = deepClone(origin)
      const config = clone.__config__
      config.span = this.formConf.span // 生成代码时，会根据span做精简判断
      this.createIdAndKey(clone)
      clone.placeholder !== undefined && (clone.placeholder += config.label)
      tempActiveData = clone

      return tempActiveData
    },
    createIdAndKey(item) {
      const config = item.__config__
      config.formId = ++this.idGlobal
      config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
      if (config.layout === 'colFormItem') {
        item.__vModel__ = `field${this.idGlobal}`
      } else if (config.layout === 'rowFormItem') {
        config.componentName = `row${this.idGlobal}`
        !Array.isArray(config.children) && (config.children = [])
        delete config.label // rowFormItem无需配置label属性
      }
      if (Array.isArray(config.children)) {
        config.children = config.children.map(childItem => this.createIdAndKey(childItem))
      }

      return item
    },
    AssembleFormData() {
      this.formData = {
        fields: deepClone(this.drawingList),
        ...this.formConf
      }

    },
    generate(data) {
      const func = this[`exec${titleCase(this.operationType)}`]
      this.generateConf = data
      func && func(data)

    },
    execRun(data) {
      this.AssembleFormData()
      this.drawerVisible = true

    },
    execDownload(data) {
      const codeStr = this.generateCode()
      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
      saveAs(blob, data.fileName)
    },
    execCopy(data) {
      document.getElementById('copyNode').click()
    },
    empty() {
      this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
        () => {
          this.drawingList = []
          this.idGlobal = 100
        }
      )
    },
    //csm save
    csmsave(){
        let paperid = this.$route.query.id;
        let that = this;
        let method = 'post';
        console.log('csmsave');
        //let url = 'http://127.0.0.1/fastadmin_plugin_1.2.0.20201008/public/KMAQCWvPYG.php/csmwj/csmwjadminapi/savepaperquestionjson?id='+paperid;
        let url = this._csmGenerateFullUrl('csmwj/csmwjadminapi/savepaperquestionjson?id='+paperid);
        this.$axios({
          method:method,
          url:url,
          data:that.drawingList
        }).then(resp => {
          console.log(resp);
        });

    },
    //生辰url地址,全路径
    _csmGenerateFullUrl(url){
        let base = this.$route.query.baseurl;
        return base+'/'+url;
    },
    drawingItemCopy(item, list) {
      let clone = deepClone(item)
      clone = this.createIdAndKey(clone)
      list.push(clone)
      this.activeFormItem(clone)

    },
    drawingItemDelete(index, list) {
      list.splice(index, 1)
      this.$nextTick(() => {
        const len = this.drawingList.length
        if (len) {
          this.activeFormItem(this.drawingList[len - 1])
        }
      })

    },
    generateCode() {
      const { type } = this.generateConf
      this.AssembleFormData()
      const script = vueScript(makeUpJs(this.formData, type))
      const html = vueTemplate(makeUpHtml(this.formData, type))
      const css = cssStyle(makeUpCss(this.formData))

      return beautifier.html(html + script + css, beautifierConf.html)
    },
    showJson() {
      this.AssembleFormData()
      this.jsonDrawerVisible = true
    },
    download() {
      this.dialogVisible = true
      this.showFileName = true
      this.operationType = 'download'
    },
    run() {
      this.dialogVisible = true
      this.showFileName = false
      this.operationType = 'run'
    },
    copy() {
      this.dialogVisible = true
      this.showFileName = false
      this.operationType = 'copy'
    },
    tagChange(newTag) {
      newTag = this.cloneComponent(newTag)
      const config = newTag.__config__
      newTag.__vModel__ = this.activeData.__vModel__
      config.formId = this.activeId
      config.span = this.activeData.__config__.span
      this.activeData.__config__.tag = config.tag
      this.activeData.__config__.tagIcon = config.tagIcon
      this.activeData.__config__.document = config.document
      if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) {
        config.defaultValue = this.activeData.__config__.defaultValue
      }
      Object.keys(newTag).forEach(key => {
        if (this.activeData[key] !== undefined) {
          newTag[key] = this.activeData[key]
        }
      })
      this.activeData = newTag
      this.updateDrawingList(newTag, this.drawingList)

    },
    updateDrawingList(newTag, list) {
      console.log("updateDrawingList");
      const index = list.findIndex(item => item.__config__.formId === this.activeId)
      if (index > -1) {
        list.splice(index, 1, newTag)
      } else {
        list.forEach(item => {
          if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children)
        })
      }

    },
    refreshJson(data) {
      console.log("refreshJson");
      this.drawingList = deepClone(data.fields)
      delete data.fields
      this.formConf = data

    }
  }
}
</script>

<style lang='scss'>
@import '@/styles/home';
/* .zxb-csmwj-input-score{
  .el-input__inner,.components-body{background-color: #fff8f8;}
}
.zxb-csmwj-input-fixed-score{
  .el-input__inner,.components-body{background-color: #fafffa;}
} */

/* &::placeholder{color: #000;} */



.importData{
  width: 90%; height: 36px; display: flex; align-items: center; justify-content: center; background-color: #409EFF; color: #fff; border-radius: 4px; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); cursor: pointer; font-size: 14px;
}
</style>
